<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/public.css" rel="stylesheet">
    <link href="../css/mobile.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="index-wrap">
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="newsdemo.html"><img src="../img/logo.png" alt=""/></a>
                </div>
                <div class="navbar-collapse collapse" role="navigation">
                    <ul class="nav navbar-nav navbar-right mb_hide">
                        <li class="shrink_l">
                            <a href="newsdemo.html">HOME</a>
                        </li>
                        <li class="hover_c shrink_l">
                            <a data-href="#about" class="txtT1">ABOUT</a>
                            <a data-href="#about" class="txtT2">关于</a>
                            <ul class="bgy">
                                <li class="bd0"><a href="adcultrue.html" >广告文化</a></li>
                                <li class="bd0"><a href="bussiness.html" >商业地产</a></li>
                                <li class="bd0"><a href="invest.html" >文创投资</a></li>
                                <li><a href="caterers.html" >餐饮休闲</a></li>
                            </ul>
                        </li>
                        <li class="shrink_l">
                           <a data-href="#news" href="trendslist.html" class="txtT1">NEWS</a>
                           <a data-href="#news" href="trendslist.html" class="txtT2 lf23">新闻</a>
                        </li>
                        <li class="shrink_l">
                            <a data-href="#custom" class="txtT1">CUSTOMER</a>
                            <a data-href="#custom" class="txtT2 lf48">客户</a>
                        </li>
                        <li class="hidden-sm hidden-md shrink_l">
                            <a data-href="#contact" class="txtT1">CONTACT</a>
                            <a data-href="#contact" class="txtT2 lf40">联系</a>
                        </li>
                        <li>
                            <a href="#" class="nav-show-toggle">
                                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bussiness-navbar-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right mb_show">
                      <li><a href="javascript:;" class="inactive">首页</a></li>
                      <li><a href="#" class="inactive">关于</a>
                        <ul style="display: none" class="sub_list">
                          <li>
                            <button class="adcult_t">广告文化</button>
                            <a href="javascript:;" class="inactive active">广告文化</a>
                            <ul style="display: none"  class="sub_list_s">
                              <li><a href="admedia.html">广告媒体</a></li>
                              <li><a href="newsdemo.html">品牌全案</a></li>
                              <li><a href="mountproduct.html">山水制品</a></li>
                            </ul>
                          </li> 
                          <li><a href="bussiness.html" class="inactive active">商业地产</a></li>
                          <li><a href="invest.html" class="inactive active">文创投资</a></li>
                          <li><a href="caterers.html" class="inactive active">餐饮休闲</a></li>
                        </ul>
                      </li>
                      <li><a href="trendslist.html" class="inactive">新闻动态</a>
                      <li><a href="#">客户服务</a></li>
                      <li><a href="talent.html">联系我们</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active" class="slid_line1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class="slid_line2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class="slid_line3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3" class="slid_line4"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
             <div class="item active">
                <img src="../img/index1.jpg" alt="" />
                <div class="index-piccenter carousel-caption">
                    <div class="mb_hide">
                        <img src="../img/index3.png">
                        <p>致力于追求企业长远可持续发展和管理效益及经营品质的持续提升打造山水投资集团新模式</p>
                    </div>
                    <div class="mb_show">
                        <img src="../img/m_index.png"/>
                    </div>
                </div>
            </div>
            <div class="item">
              <img src="../img/index1.jpg" alt="...">
              <div class="carousel-caption">
                slide0
              </div>
            </div>
            <div class="item">
              <img src="../img/index1.jpg" alt="...">
              <div class="carousel-caption">
                slide2
              </div>
            </div>
            <div class="item">
              <img src="../img/index1.jpg" alt="...">
              <div class="carousel-caption">
                slide3
              </div>
            </div>
          </div>
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <img src="../img/prev_s.png">
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <img src="../img/next_s.png">
          </a>
        </div>

       
        <div class="index-contents">
            <div class="index-about bgf8" id="about">
                <div class="container">
                    <h1 class="txt40">ABOUT<img class="react" src="../img/react.png"/></h1>
                    <h1 class="suptext">16年<span class="pdl54">从未止步</span></h1>
                    <h2>专业运营平台高效品牌传播</h2>
                    <h4 class="txtg">Professional operating platform for efficient brand communication has never stopped 16 years</h4>
                    <div class="row mg60">
                        <div class="col-xs-6 col-md-3" data-href="adcultrue.html">
                            <div class="contents-lists">
                                <div class="hmt100"><img class="contentlogo" src="../img/culture.png"></div>
                                <div class="text-center">
                                    <h3>广告文化</h3>
                                    <h6 class="txtg">Advertising Culture</h6>
                                    <div class="text-bg">
                                        <p>致力于追求企业长远可持续<br/>发展和管理效益及经营品质</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-md-3" data-href="bussiness.html">
                            <div class="contents-lists">
                                <div class="hmt100"><img class="contentlogo" src="../img/estate.png"></div>
                                <div class="text-center">
                                    <h3>商业地产</h3>
                                    <h6 class="txtg">Commercial real estate</h6>
                                     <div class="text-bg">
                                        <p>致力于追求企业长远可持续<br/>发展和管理效益及经营品质</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-md-3" data-href="invest.html">
                            <div class="contents-lists">
                                <div class="hmt100"><img class="contentlogo" src="../img/invest.png"></div>
                                <div class="text-center">
                                    <h3>文创投资</h3>
                                    <h6 class="txtg">Text Creation Investment</h6>
                                    <div class="text-bg">
                                        <p>致力于追求企业长远可持续<br/>发展和管理效益及经营品质</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-md-3" data-href="caterers.html">
                            <div class="contents-lists">
                                <div class="hmt100"><img class="contentlogo" src="../img/casul.png"></div>
                                <div class="text-center">
                                    <h3>餐饮休闲</h3>
                                    <h6 class="txtg">Foods Drinking and Entertainment</h6>
                                    <div class="text-bg">
                                        <p>致力于追求企业长远可持续<br/>发展和管理效益及经营品质</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="index-news" id="news">
                <div class="container">
                    <h1 class="pdt26 txt40">NEWS<img class="react" src="../img/react.png"/></h1>
                    <div class="row mg60">
                        <div class="col-xs-6 col-md-3">
                          <a href="trends.html">
                            <div class="contents-news">
                                <div class="mask-bg"></div>
                                <div class="comlogo"><img src="../img/smalllog.png"></div>
                                <img src="../img/news1.jpg" class="hov_big"/>
                            </div>
                            <div class="news-title">
                                <h3>新龙AB栋代理营销</h3>
                                <h6>2015.03.07</h6>
                            </div>
                            <div class="bd3"></div>
                          </a>
                        </div>
                        <div class="col-xs-6 col-md-3">
                          <a href="trends.html">
                            <div class="contents-news">
                                <div class="mask-bg"></div>
                                <div class="comlogo"><img src="../img/smalllog.png"></div>
                                <img src="../img/news2.jpg" class="hov_big"/>
                            </div>
                            <div class="news-title">
                                <h3>大童8周年会议设计服务</h3>
                                <h6>2015.03.07</h6>
                            </div>
                            <div class="bd3"></div>
                            </a>
                        </div>
                        <div class="col-xs-6 col-md-3">
                          <a href="trends.html">
                            <div class="contents-news">
                                <div class="mask-bg"></div>
                                <div class="comlogo"><img src="../img/smalllog.png"></div>
                                <img src="../img/news3.jpg" class="hov_big"/>
                            </div>
                            <div class="news-title">
                                <h3>雅泰联合网站设计</h3>
                                <h6>2015.03.07</h6>
                            </div>
                            <div class="bd3"></div>
                            </a>
                        </div>
                        <div class="col-xs-6 col-md-3">
                          <a href="trends.html">
                            <div class="contents-news">
                                <div class="mask-bg"></div>
                                <div class="comlogo"><img src="../img/smalllog.png"></div>
                                <img src="../img/news4.jpg" class="hov_big"/>
                            </div>
                            <div class="news-title">
                                <h3>左陕右甘开业</h3>
                                <h6>2015.03.07</h6>
                            </div>
                            <div class="bd3"></div>
                            </a>
                        </div>
                    </div>
                    <div class="mg24 mb_mg0">
                        <button type="button" class="btn btn-default viewmore"><a href="trendslist.html">VIEW MORE</a></button>
                    </div>
                </div>
            </div>
            <div class="index-custom bgf8 mg24" id="custom">
              <div class="container">
                    <h1 class="pdt26 txt40">CUSTOMER<img class="react" src="../img/react.png"/></h1>
                    <h1 class="suptext">500+<span class="pdl54">服务客户</span></h1>
                    <h2>专业运营平台高效品牌传播</h2>
                    <h4 class="txtg">Professional operating platform for efficient brand communication has never stopped 16 years</h4>
                    <div>
                      <img src="../img/customs.jpg"/>
                    </div>
                </div>
            </div>
            <div class="index-contact" id="contact">
                <div class="container">
                    <h1 class="pdt26 txt40">CONTACT<img class="react" src="../img/react.png"/></h1>
                    <div class="row mg60">
                      <div class="col-xs-12 col-md-6">
                         <div class="mb_show">
                            <h3 class="mg0">您好 HELLO!</h3>
                            <h5>感谢您来到山水投资，若您有合作意向，请您为我们留言或使用以下方式联系我们，我们将尽快给你回复，并为您提供最真诚的设计服务，谢谢！</h5>
                        </div>
                         <form role="form">
                            <div class="form-group">
                              <label for="custom-name">姓名 Name</label>
                              <input type="text" class="form-control" id="custom-name"/>
                            </div>
                            <div class="form-group">
                              <label for="custom-phone">电话 Phone</label>
                              <input type="text" class="form-control" id="custom-phone">
                            </div>
                            <div class="form-group">
                              <label for="custom-info">信息 Information</label>
                              <textarea class="form-control mb_hide" rows="11" id="custom-info"></textarea>
                              <textarea class="form-control mb_show" rows="8" id="custom-infom"></textarea>
                            </div>
                            <div class="mg20"><button type="submit" class="btn btn-default btnc9">SEND</button></div>
                          </form>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <div class="mb_hide">
                            <h3 class="mg0">您好 HELLO!</h3>
                            <h5>感谢您来到山水投资，若您有合作意向，请您为我们留言或使用以下方式联系我们，我们将尽快给你回复，并为您提供最真诚的设计服务，谢谢！</h5>
                        </div>
                        <div class="contact-ways">
                           <ul class="list-unstyled">
                             <li>
                                <img src="../img/phone.png"/>
                                <div class="contact-ways-ls">
                                  <p>广告文化：134-6679-9039</p>
                                  <p>商业地产：134-6679-9039</p>
                                  <p>品牌全案：134-6679-9039</p>
                                  <p>餐饮休闲：134-6679-9039</p>
                                </div>
                              </li>
                             <li class="mg20"><img src="../img/mail.png"  class="maillogo"/><span>1234567@.163.com</span></li>
                             <li><img src="../img/map.png"/><span>北京市海淀区花园路小关街120号万盛商务会馆</span></li>
                           </ul>
                        </div>
                        <img src="../img/erwma.jpg" class="foot-erwma">
                      </div>
                    </div>
                    <div class="footer">
                      <p class="mb_hide">版权所有©山水投资 - 山水永道（北京）国际广告传播有限公司 | 京ICP备12048468号</p>
                      <img class="mb_show" src="../img/footl.jpg"/>
                      <div class="share-logo fr">
                        <img src="../img/footshare.jpg"/>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="float_lists mb_hide">
            <ul>        
                <li class="float_lists1"><a href="javascript:;" class="back_top"><img width="24" height="24" src="../img/float_top.png"></a></li>
                <li class="float_listsc float_lists2"><a href="javascript:;"><img width="24" height="24" src="../img/float_qq.png" target="_blank">点击咨询</a></li>
                <li class="float_listsc float_lists3"><a href="javascript:;" target="_blank"><img width="24" height="24" src="../img/float_phone.png">0755-28317087</a></li>
                <li class="float_lists4"><a href="javascript:;"><img width="24" height="24" src="../img/float_erw.png"></a><div class="float_shwx"><img width="188" height="188" alt="" src="../img/wx_img.jpg"></div></li>    
            </ul>
        </div>
        <div class="m_mask mb_show">
        </div>
      </div>
        <script src="../js/jquery-2.1.0.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <script src="../js/common.js"></script>
        <script type="text/javascript">
        $(function() {
            var ab_t=$("#about").offset().top-90;
            var new_t=$("#news").offset().top-90;
            var cus_t=$("#custom").offset().top-90;
            var co_t=$("#contact").offset().top-90;
            
            //滚动监听
            $(window).scroll(function(){
                var scroll_t=$(window).scrollTop();
               if(scroll_t<ab_t){
                 $(".navbar-right>li").eq(1).find(".txtT1").css({"opacity": "1","filter": "alpha(opacity=1)","margin-top": "0"});
                 $(".navbar-right>li").eq(1).find('.txtT2').removeClass('tShow');
               }else if(scroll_t>=ab_t&&scroll_t<new_t){
                  fade_t(1);
               }else if(scroll_t>=new_t&&scroll_t<cus_t-90){
                  fade_t(2);
               }else if(scroll_t>=cus_t&&scroll_t<co_t-90){
                  fade_t(3);
               }else if(scroll_t>=co_t-80){
                  fade_t(4); 
               }
            });
            //轮播图
            $('.carousel').carousel();
           //左侧边栏
           var height_F=$(window).height()- $(".float_lists").height();
           $(".float_lists").css("top",height_F/2);
          
           $(".float_listsc").hover(function() {
               var widLi=$(this).width();
               $(this).animate({left:-widLi+50},300);
           }, function() {
               var widLi=$(this).width();
               $(this).animate({left:0},300);
           });
           //二维码
           $(".float_lists4").hover(function() {
               $(".float_shwx").show();
           }, function() {
               $(".float_shwx").hide();
           });
           //滚动侧栏
           $(window).scroll(function(){
             var scrollTop=$(this).scrollTop();
             $(".float_lists").stop().animate({top:scrollTop+height_F/2},100);
           });

           //居中图片
           $(".index-piccenter").css("margin-top",-$(".index-piccenter").height()/2);

           //鼠标滑过
           $(".index-news .col-xs-6").hover(function() {
               $(this).addClass('active').siblings().removeClass('active');
           }, function() {
               $(this).removeClass('active');
           });
           //关于点击跳转
           $(".index-about .col-xs-6").click(function(){
               location.href=$(this).attr("data-href");
           });
          
            $(".navbar-right li:not(:first)").click(function() {
               var listId=$(this).find("a:first").attr("data-href");
               var offSeTLt=0;
               if(listId==undefined){
                return;
               }
               offSeTLt=$(listId).offset().top;
               $("html,body").stop().animate({"scrollTop":offSeTLt-90},800);
               return;
            });
             $(".hover_c .txtT2,.hover_c .txtT1").click(function() {
               var listId=$(this).attr("data-href");
               var offSeTLt=$(listId).offset().top;
               $("html,body").stop().animate({"scrollTop":offSeTLt-90},800);
            });
           //
           $(".index-about .row .col-xs-6").on({mouseover:function() {
                $(this).addClass('ts');
              },mouseout:function(){
                $(this).removeClass('ts');
              }
      
            });


        });

        function fade_t(i){
          $(".navbar-right>li").eq(i).find('.txtT2').addClass('tShow');
          $(".navbar-right>li").eq(i).find(".txtT1").css({"margin-top": "-20px","opacity": "0","filter": "alpha(opacity=0)"});
          $(".navbar-right>li").eq(i).siblings().find('.txtT2').removeClass('tShow');
          $(".navbar-right>li").eq(i).siblings().find(".txtT1").css({"opacity": "1","filter": "alpha(opacity=1)","margin-top": "0"});
        }
        </script>
</body>

</html>
